<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item>商品管理</el-breadcrumb-item>
		<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card>
			<el-row>
				<el-col>
					<el-button type="primary"
					@click="showAddCateDiallog">添加分类</el-button>
				</el-col>
			</el-row>
			<!-- 表格 -->
			<tree-table :data="catelist" :columns="columns"
			:selection-type="false" :expand-type="false"
			show-index index-text="#" border :show-row-hover=
			"false">
			<!-- 是否有效模板 -->
				<template slot="isok" slot-scope="scope">
					<i class="el-icon-success"
					v-if="scope.row.cat_deleted === false"
					style="color:lightgreen;">
					</i>
					<i class="el-icon-error" v-else
					style="color:lightgreen;">						
					</i>
				</template>
				<!-- 排序模板 -->
				<template slot="order" slot-scope="scope">
					<el-tag size="mini" v-if="scope.row.cat_level 
					=== 0">
					一级</el-tag>
					<el-tag type="success" size="mini"
					 v-else-if="scope.row.cat_level === 1">
					二级</el-tag>
					<el-tag type="warning" size="mini"
					v-else-if="scope.row.cat_level === 2">
					三级</el-tag>
				</template>
				<!-- 操作 -->
				<template slot="opt" slot-scope="scope">
					<el-button type="primary" size="mimi"
					 icon="el-icon-edit">编辑		
					</el-button>
					<el-button type="danger" size="mimi"
					icon="el-icon-delete">删除
					</el-button>
				</template>
			</tree-table>
			
			<!-- 分页区域 -->
			<el-pagination @size-change="handleSizeChange"
			 @current-change="handleCurrentChange" 
			 :current-page="querInfo.pagenum"
			  :page-sizes= "[3, 5, 8, 12]" 
			  :page-size="querInfo.pagesize"
			 layout="total, sizes, prev, pager, next, jumper" 
			:total="total">
				
			</el-pagination>
		</el-card>
		<!-- 添加分类对话框 -->
		<el-dialog title="添加分类"
		:visible.sync="addCateDialogVisible" 
		width="50%" @close="addCateDialogClosed" >
			<!-- 添加用户内容主题区域 -->
			<el-form :model="addCateForm" 
			:rules="addCateFormRules" ref="addCateFormRef" 
			label-width="70px">
				<el-form-item label="分类名称:" prop="cat_name">
					<el-input v-model="addCateForm.cat_name">
						
					</el-input>
				</el-form-item>
				<el-form-item label="父级分类:">
					<!-- options指定数据源 -->
					<!-- props用来指定配置对象 -->
					 <el-cascader 
					    v-model="selectedKeys"
					    :options="parentCatelist"				  
						:props="cascaderProps"
					    @change="parentCateChange"
						clearable ></el-cascader>
					
				</el-form-item>
				
			</el-form>
			<!-- 底部区域 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="addCateDialogVisible = false">取消</el-button>
				<el-button type="primary" @click='addCate'>确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		return {
			//商品分类的数据列表，默认为空
			catelist: [],
			// 总数据条数
			total: 0,
			//查询条件
			querInfo: {
				type: 3,
				pagenum: 1,
				pagesize: 5
			},
			addCateDialogVisible: false,
			parentCatelist: [],
			// 选中的父级分类ID数组
			selectedKeys: [],
			// 指定级联选择器的配置对象
			cascaderProps: {
				expandTrigger: 'hover',
				value: 'cat_id',
				label: 'cat_name',
				children: 'children',
				checkStrictly: true
			},
			addCateForm: {
				cat_name: '',
				cat_level: 0,
				cat_pid: 0
			},
			addCateFormRules: {
				cat_name: [
					{ required: true, message:
					 '请输入分类名称', trigger: 'blur'}			
				]			
			},
			columns: [
				{
					label: '分类名称',
					prop: 'cat_name',				
				},{
					label: '是否有效',
					type: 'template',
					//模板名称
					template: 'isok'
				},
				{
					label: '排序',
					type: 'template',
					//模板名称
					template: 'order'
				},
				{
					label: '操作',
					type: 'template',
					//模板名称
					template: 'opt'
				}
			]
		}
	},
	created() {
		this.getCateList()
	},
	methods: {
		//获取商品分类数据
		async getCateList() {
			const { data: res } = await this.$http.get('categories', 
			{ params: this.querInfo })
			
			if(res.meta.status !== 200) {
				this.$message.error('获取商品分类失败')
			}
			//console.log(res.data)
			//this.$message.success('获取商品分类成功')
			//把数据列表赋值给catelist
			this.catelist = res.data.result
			// 为总数据条数赋值
			this.total = res.data.total
		},
		//监听pagesize改变
		handleSizeChange(newSize) {
			this.querInfo.pagesize = newSize
			this.getCateList()
		},
		//监听pagenum的改变
		handleCurrentChange(newPage) {
			this.querInfo.pagenum = newPage
			this.getCateList()
		},
		showAddCateDiallog() {
			//先获取父级分类的列表
			this.getParentCateList()
			this.addCateDialogVisible = true
		},
		async getParentCateList() {
			const { data: res } = await this.$http.get(
			'categories', {params:{ type: 2 }
			})
			if(res.meta.status !== 200) {
				this.$message.error('获取父级分类失败')
			}
			
			//this.$message.success('获取父级分类成功')
			this.parentCatelist = res.data
			//console.log(res.data)
		},
		parentCateChange() {
			// 选择项发生变化触发函数
			//如果selectedkeys的length大于0，则选中了父级
			if(this.selectedKeys.length > 0) {
				//父级分类的ID
				this.addCateForm.cat_pid = this.selectedKeys[
					this.selectedKeys.length - 1
				]
				//当前分类的等级赋值
				this.addCateForm.cat_level = this.selectedKeys.length
				return
			} else {
				this.addCateForm.cat_pid = 0
				//当前分类的等级赋值
				this.addCateForm.cat_level = 0
			}
		},
		addCate() {
			//console.log(this.addCateForm)
			this.$refs.addCateFormRef.validate(async valid => {
				if(!valid) return
				const { data: res } = await this.$http.post(
				'categories',this.addCateForm)
				if(res.meta.status !== 201) {
					return this.$message.error('添加分类失败')
				}
				this.$message.success('添加分类成功')
				this.getCateList()
				this.addCateDialogVisible = false
			})
			
		},
		addCateDialogClosed() {
			this.$refs.addCateFormRef.resetFields()
			this.selectedKeys = []
			this.addCateForm.cat_level = 0
			this.addCateForm.cat_pid = 0
		}
	}
}
</script>

<style lang="less" scoped>
.el-cascader {
	width: 100%;
}
</style>
